<!--
 * @Description: 多功能表格
-->
<template>
  <div :class="['_ehl_custable', { _ehl_custable_fixed: big }]">
    <!-- 标题+工具条 -->
    <div class="_ehl_custool" v-if="title || tool['show']">
      <div class="_ehl_custitle" v-if="title" :title="title">{{ title }}</div>
      <div v-if="tool['show']" class="_ehl_cusbtnbox">
        <i
          class="el-icon-top-right _ehl_cusbtn"
          v-if="tool['max_min'] && big === false"
          :title="$t('common.zuidahua')"
          @click="big = true"
        ></i>
        <i
          class="el-icon-bottom-left _ehl_cusbtn"
          v-if="tool['max_min'] && big !== false"
          :title="$t('common.zuixiaohua')"
          @click="big = false"
        ></i>
        <i
          class="el-icon-close _ehl_cusbtn"
          v-if="tool['del'] && select"
          :title="$t('common.shanchuhang')"
          @click="$emit('delete', selectArr)"
        ></i>
        <slot v-if="tool['other']">
          <i
            v-if="tool['add']"
            class="el-icon-plus _ehl_cusbtn"
            :title="$t('common.tianjia')"
            @click="$emit('add')"
          ></i>
        </slot>
      </div>
    </div>
    <div class="_ehl_cusdata" v-if="dataCopy.length > 0">
      <!-- 表头 -->
      <div class="_ehl_cusline _ehl_header_line">
        <!-- 多选框 -->
        <div class="_ehl_header select_box" v-if="select">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="allCheck"
            @change="selectAll"
          />
        </div>
        <div class="_ehl_header select_box" v-if="showIndex"> 序号 </div>
        <template v-for="(optionItem, optionIndex) in optionsArray">
          <div
            class="_ehl_header"
            v-if="!(optionItem.options[optionItem.key].columnShow === false)"
            :key="optionIndex"
            :style="optionItem.options[optionItem.key].columnStyle"
          >
            <div v-if="optionItem.requireIcon" style="color: red">*</div>
            <span>{{ optionItem.title }}</span>
            <span v-if="optionItem.html" v-html="optionItem.html" />
          </div>
        </template>
      </div>
      <!-- 数据内容 -->
      <div
        :class="[
          '_ehl_cusline',
          '_ehl_data_line',
          { _ehltable_odd_row: dataIndex % 2 === 1 },
        ]"
        v-for="(dataItem, dataIndex) in dataCopy"
        :key="dataIndex"
      >
        <!-- 多选框 -->
        <div class="_ehl_cusitem select_box" v-if="select">
          <el-checkbox
            v-model="dataItem._checked"
            @change="val => selectAdd(val, dataIndex)"
          >
          </el-checkbox>
        </div>
        <!-- 序号 -->
        <div class="_ehl_cusitem select_box" v-if="showIndex">
          {{ dataIndex + 1 }}
        </div>
        <!-- 数据 -->
        <template v-for="(optionItem, optionIndex) in optionsArray">
          <div
            class="_ehl_cusitem"
            v-if="!(optionItem.options[optionItem.key].columnShow === false)"
            :key="optionIndex"
            :style="optionItem.options[optionItem.key].columnStyle"
          >
            <template v-if="showCtrl">
              <ehl-form
                v-if="
                  showCtrl &&
                  (optionItem.options[optionItem.key].show ||
                    (dataItem[optionItem.key] && dataItem[optionItem.key].show))
                "
                :disabled="dataItem[optionItem.key] && dataItem[optionItem.key].disable"
                :options="optionItem.options"
                :data="dataItem[optionItem.key]"
                :other-param="{
                  row: dataItem,
                  rowIndex: dataIndex,
                  colume: optionItem,
                  columeIndex: optionIndex,
                  formOptions: formOptions,
                  formData: formData,
                  other: otherParam,
                }"
              ></ehl-form>
            </template>
            <ehl-form
              v-else
              :options="optionItem.options"
              :data="dataItem"
              :other-param="{
                row: dataItem,
                rowIndex: dataIndex,
                colume: optionItem,
                columeIndex: optionIndex,
                formOptions: formOptions,
                formData: formData,
                other: otherParam,
              }"
            ></ehl-form>
          </div>
        </template>
      </div>
    </div>
    <div v-else class="nodata_placeholder">{{ placeholder }}</div>
  </div>
</template>
<script>
  import ehlForm from '@/common'
  export default {
    name: 'ehlCusTable',
    components: {
      ehlForm,
    },
    props: {
      data: { type: Array, default: () => [] },
      column: { type: Object, default: () => {} },
      //是否是根据数据来控制元素显示与否
      showCtrl: { type: Boolean, default: () => false },
      //是否有多选框
      select: { type: Boolean, default: () => false },
      //是否显示序号
      showIndex: { type: Boolean, default: () => true },
      //表格标题
      title: { type: String, default: () => null },
      placeholder: { type: String, default: () => '暂无数据' },
      //外部表单传进来的数据
      formData: { type: Object, default: () => {} },
      //外部表单传进来的配置
      formOptions: { type: Object, default: () => {} },
      //外部表单传进来的其他参数
      otherParam: { type: Object, default: () => {} },
      tool: {
        type: Object,
        default: () => ({
          show: true,
          max_min: true,
          del: true,
          other: true,
          add: true,
        }),
      },
    },
    data() {
      return {
        isIndeterminate: false, //表头多选框的半选状态
        allCheck: true, //表头多选框的状态
        big: false, //是否最大化
        selectArr: [], //多选后选中的的数组
        dataCopy: this.data || [], //原始数据的浅拷贝
        optionsArray: [], //用于循环生成表单
        optionsCopy: {}, //原配置的深拷贝副本，用于当作参数传递出去
      }
    },
    watch: {
      column: {
        handler: function (val, old) {
          this.init(val)
        },
        deep: true,
      },
      data: {
        handler: function (val, old) {
          // this.dataCopy = val
          this.initData()
        },
        deep: true,
      },
    },
    created() {
      this.init(this.column)
    },
    methods: {
      //初始化状态
      init(val) {
        this.optionsArray = this.deepCopy(val || {}, this.optionsCopy)
        this.initData()
        let that = this
        this.dataCopy.forEach(i => {
          i._checked = false
          that.allCheck &&= i._checked
        })
      },
      initData() {
        if (this.showCtrl) {
          //不能绑定value，需要绑定对应的key
          this.dataCopy.forEach(i => {
            let tmp = Object.keys(i)
            tmp.forEach(key => {
              if (key !== '_checked') {
                if (i[key][key] !== undefined) {
                  $set(i[key], 'value', i[key][key])
                }
                $set(i[key], key, i[key].value)
              }
            })
          })
        }
      },
      //根据原配置文件生成新的配置数组
      deepCopy(obj, param) {
        Object.keys(obj).forEach(key => {
          obj[key].key = key
        })
        Object.values(obj).forEach(i => {
          let tmp = this.deepCopy2(i)
          param[tmp['key']] = {
            title: tmp.title,
            key: tmp['key'],
            width: tmp.width,
            requireIcon: tmp.requireIcon,
            html: tmp.html,
            options: { [tmp['key']]: tmp },
          }
        })
        return Object.values(param)
      },
      //深拷贝原配置文件
      deepCopy2(obj) {
        let tmp = {}
        Object.keys(obj).forEach(key => {
          if (obj[key] === undefined || obj[key] === null) {
            tmp[key] = null
          } else if (Array.isArray(obj[key])) {
            tmp[key] = []
            obj[key].forEach(i => {
              if (typeof i === 'object') {
                tmp[key].push(this.deepCopy2(i))
              } else {
                tmp[key].push(i)
              }
            })
          } else if (typeof obj[key] === 'object') {
            tmp[key] = this.deepCopy2(obj[key])
          } else {
            tmp[key] = obj[key]
          }
        })
        return tmp
      },
      getSelectArr() {
        return this.selectArr
      },
      selectAll(val) {
        let tmp = [],
          ii = 0
        this.dataCopy.forEach(i => {
          i._checked = val
          tmp.push(ii++)
        })
        if (val) {
          this.selectArr = tmp
        } else {
          this.selectArr = []
        }
        this.isIndeterminate = false
      },
      selectAdd(val, index) {
        if (index !== undefined) {
          let that = this
          if (val) {
            this.selectArr = Array.from(new Set([...this.selectArr, index]))
          } else {
            this.selectArr = this.selectArr.filter(i => {
              return i !== index
            })
          }
          that.allCheck = true
          this.dataCopy.forEach(i => {
            that.allCheck &&= i._checked
          })
          this.isIndeterminate =
            this.selectArr.length > 0 && this.selectArr.length < this.dataCopy.length
        }
      },
    },
  }
</script>
